<template>
  <!-- 自定义导航栏 -->
  <div>
    <cu-nav
      centerText="导航栏"
      colorIcon="#fff"
      colorText="#fff"
      :leftArrow="true"
      background="#e8443d"
      :border="true"
      @click-left="chickLeft"
    ></cu-nav>

    <div class="model" style="margin-top:10px">
      <div class="title">基础用法</div>
      <cu-nav
        centerText="基础用法"
        colorIcon="#fff"
        colorText="#fff"
        :leftArrow="true"
        background="#e8443d"
        :border="true"
        @click-left="chickLeft1"
      ></cu-nav>
    </div>

    <div class="model">
      <div class="title">多页面固定导航栏</div>
      <cu-header centerText="调皮屋" :fixed="false"></cu-header>
    </div>
  </div>
</template>

<script>
import CuHeader from "@/components/custom-model/cu-header";
import CuNav from "@/components/custom-model/cu-nav";
import { Toast } from "vant";

export default {
  components: {
    "cu-header": CuHeader,
    "cu-nav": CuNav
  },
  methods: {
    chickLeft(e) {
      this.$router.go(-1);
    },
    chickLeft1() {
      Toast("返回");
    }
  }
};
</script>

<style lang="less" scoped>
.view-router {
  width: 100%;
  min-height: 100vh;
  // background: #fff;
}
.model {
  padding: 10px 0;
  margin-bottom: 10px;
  background: #fff;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #565656;
    padding-left: 10px;
    margin-bottom: 10px;
    border-bottom: 0.5px solid #ddd;
  }
}
</style>